<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">打卡</view>
				<view class="right_box">
					<view @tap="showDateTable" class="">
						<view style="text-align: center;font-size: 26rpx;font-weight: 400;">{{moment(selectDate).format("M月D日")}}</view>
						<view style="text-align: center;font-size: 26rpx;font-weight: 400;">{{moment(selectDate).locale('zh-cn').format('dddd')}}</view>
					</view>
					<!--
					<view v-if="isAdmin" class="btn-text" @tap="goClockinMember">设置打卡成员</view>
					-->
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<!-- <view style="height:calc(100rpx + var(--status-bar-height));"></view> -->
        <scroll-view :scroll-y="true" class="content1 d-flex" style="top:calc(100rpx + var(--status-bar-height));" :style="{bottom:contentBottom+'px'}">
            <view class="content">
                <view class="content-title d-flex a-center j-between">
                    <view class="d-flex a-center">
                        <view class="title-icon"></view>
                        <view class="title-text">饮食打卡</view>
                        <view class="title-number">({{pageData?.foodTotalCount}}人参与)</view>
                    </view>
                    <view class="d-flex a-center">
                        <template v-if="isAdmin">
                            <view class="btn-text" @tap="goClockinMember(1)">设置打卡成员</view>
                        </template>
                        <template v-else>
                            <view class="btn-text" v-if="!isClockin" @tap="addClockin">加入打卡</view>
                            <view class="btn-text" v-else >已加入</view>
                        </template>
                    </view>
                </view>
                <view class="content-diet d-flex j-between wrap">
                    <view :class="`diet-cell ${pageData?.isBreakfast==1?'clockin-food-yes':'clockin-no'}`" @tap="goClockinState(0)">
                        <image v-if="pageData?.isBreakfast==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-zaocan ${pageData?.isBreakfast==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isBreakfast==1?'colour-white':'colour-black'}`">早餐</view>
                            </view>
                            <view v-if="pageData?.isBreakfast==1" class="cell-top-right colour-white">已打卡</view>
                            <view v-if="pageData?.isBreakfast==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex">
                            <view :class="`cell-below-member ${pageData?.isBreakfast==1?'colour-white':'colour-black'}`">{{pageData?.breakfastCount}}人已打卡</view>
                        </view>
                    </view>
                    <view :class="`diet-cell ${pageData?.isLunch==1?'clockin-food-yes':'clockin-no'}`" @tap="goClockinState(1)">
                        <image v-if="pageData?.isLunch==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-wucan ${pageData?.isLunch==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isLunch==1?'colour-white':'colour-black'}`">午餐</view>
                            </view>
                            <view v-if="pageData?.isLunch==1" class="cell-top-right colour-white">已打卡</view>
                            <view v-if="pageData?.isLunch==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex">
                            <view :class="`cell-below-member ${pageData?.isLunch==1?'colour-white':'colour-black'}`">{{pageData?.lunchCount}}人已打卡</view>
                        </view>
                        
                    </view>
                    <view :class="`diet-cell ${pageData?.isDinner==1?'clockin-food-yes':'clockin-no'}`" @tap="goClockinState(2)">
                        <image v-if="pageData?.isDinner==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-wancan ${pageData?.isDinner==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isDinner==1?'colour-white':'colour-black'}`">晚餐</view>
                            </view>
                            <view v-if="pageData?.isDinner==1" class="cell-top-right colour-white">已打卡</view>
                            <view v-if="pageData?.isDinner==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex">
                            <view :class="`cell-below-member ${pageData?.isDinner==1?'colour-white':'colour-black'}`">{{pageData?.dinnerCount}}人已打卡</view>
                        </view>
                    </view>
                    <view :class="`diet-cell ${pageData?.isAddFood==1?'clockin-food-yes':'clockin-no'}`" @tap="goClockinState(3)">
                        <image v-if="pageData?.isAddFood==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-jiacan ${pageData?.isAddFood==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isAddFood==1?'colour-white':'colour-black'}`">加餐</view>
                            </view>
                            <view v-if="pageData?.isAddFood==1" class="cell-top-right colour-white">已打卡</view>
                            <view v-if="pageData?.isAddFood==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex">
                            <view :class="`cell-below-member ${pageData?.isAddFood==1?'colour-white':'colour-black'}`">{{pageData?.addFoodCount}}人已打卡</view>
                        </view>
                    </view>
                    <view :class="`diet-cell ${pageData?.isWater==1?'water':'clockin-water-no'}`" @tap="goClockinState(4)">
                        <image v-if="pageData?.isWater==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-yinshuiliang ${pageData?.isWater==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isWater==1?'colour-white':'colour-black'}`">喝水</view>
                            </view>
                            <view v-if="pageData?.isWater==1" class="cell-top-right colour-white">继续打卡</view>
                            <view v-if="pageData?.isWater==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex j-between">
                            <view :class="`cell-below-member ${pageData?.isWater==1?'colour-white':'colour-black'}`">{{pageData?.waterCount}}人已打卡</view>
                            <view :class="`cell-below-member ${pageData?.isWater==1?'colour-white':'colour-black'}`">{{pageData?.water==null?'0':pageData?.water}}/{{pageData?.needWater}}ml</view>
                        </view>
                    </view>
                </view>
                <!--体重打卡-->
                <view class="content-title d-flex a-center j-between">
                    <view class="d-flex a-center">
                        <view class="title-icon" style="background: #8C52FF;"></view>
                        <view class="title-text">体重打卡</view>
                        <view class="title-number">({{pageData?.weightTotalCount}}人参与)</view>
                    </view>
                    <view class="d-flex a-center">
                        <template v-if="isAdmin">
                            <view class="btn-text" @tap="goClockinMember(2)">设置打卡成员</view>
                        </template>
                        <template v-else>
                            <view class="btn-text" v-if="!isClockin2" @tap="addClockin">加入打卡</view>
                            <view class="btn-text" v-else >已加入</view>
                        </template>
                    </view>
                </view>
                <view class="content-diet d-flex j-between wrap">
                    <view :class="`diet-cell ${pageData?.isAimWeight==1?'weight':'clockin-weight-no'}`" @tap="goClockinState(5)">
                        <image v-if="pageData?.isAimWeight==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-tizhong ${pageData?.isAimWeight==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isAimWeight==1?'colour-white':'colour-black'}`">体重</view>
                            </view>
                            <view v-if="pageData?.isAimWeight==1" class="cell-top-right colour-white">已打卡</view>
                            <view v-if="pageData?.isAimWeight==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex">
                            <view :class="`cell-below-member ${pageData?.isAimWeight==1?'colour-white':'colour-black'}`">{{pageData?.aimWeightCount}}人已打卡</view>
                        </view>
                    </view>
                </view>
                <!--运动打卡-->
                <view class="content-title d-flex a-center j-between">
                    <view class="d-flex a-center">
                        <view class="title-icon" style="background: #FF7840;"></view>
                        <view class="title-text">运动打卡</view>
                        <view class="title-number">({{pageData?.sportsTotalCount}}人参与)</view>
                    </view>
                    <view class="d-flex a-center">
                        <template v-if="isAdmin">
                            <view class="btn-text" @tap="goClockinMember(3)">设置打卡成员</view>
                        </template>
                        <template v-else>
                            <view class="btn-text" v-if="!isClockin3" @tap="addClockin">加入打卡</view>
                            <view class="btn-text" v-else >已加入</view>
                        </template>
                    </view>
                </view>
                <view class="content-diet d-flex j-between wrap">
                    <view :class="`diet-cell ${pageData?.isSports==1?'motion':'clockin-motion-no'}`" @tap="goClockinState(6)">
                        <image v-if="pageData?.isSports==1" class="cell-background" src="@/static/image/tiny-spot.png"></image>
                        <view class="cell-top d-flex a-center j-between">
                            <view class="cell-top-left d-flex a-center">
                                <i :class="`icon icon-yundong ${pageData?.isSports==1?'colour-white':'colour-black'}`" style="size: 40rpx;"></i>
                                <view :class="`top-left-text ${pageData?.isSports==1?'colour-white':'colour-black'}`">运动</view>
                                
                            </view>
                            <view v-if="pageData?.isSports==1" class="cell-top-right colour-white">已打卡</view>
                            <view v-if="pageData?.isSports==0" class="cell-top-right colour-ash">未打卡</view>
                        </view>
                        <view class="cell-below d-flex">
                            <view :class="`cell-below-member ${pageData?.isSports==1?'colour-white':'colour-black'}`">{{pageData?.sportsCount}}人已打卡</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
		<view class="bottom-button">
            <view v-if="formRecord" class="btn_main_r_line" style="position:relative;margin:0 auto;margin-bottom:20rpx;" @tap="goQuanzi" >
                <view class="text" style="font-weight: 600;">进入群</view>
            </view>
			<view v-if="isTip" class="bottom-tip d-flex a-center j-between">
				<view class="d-flex j-center" style="flex: 1;">
					<view class="bottom-tip-text" style="padding-left: 30rpx;">正在查看历史打卡，</view>
					<view @tap="goToday" class="bottom-tip-text" style="text-decoration: underline; ">切换到今天</view>
				</view>
				<image @tap="isTip = false" src="@/static/image/close-tip.png" style="width: 30rpx;height: 30rpx;"></image>
			</view>
			<tm-button v-if="isClockin||isClockin2||isClockin3" _style="margin:0 auto 0 auto;font-weight: 600;" :width="690" :height="80" :shadow="-1" round="5"
			    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="goClockinRecord"
			    label="我的打卡记录"></tm-button>
			<tm-button v-else _style="margin:0 auto 0 auto;font-weight: 600;" :width="690" :height="80" :shadow="-1" round="5"
			    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="addClockin"
			    label="加入打卡"></tm-button>
            <view class="heightBox"></view>
		</view>
	</view>
	<!--日期选择-->
	<dateTable
		ref="datePopup"
		:markDate="markDate"
		:initialDate="selectDate"
		color="#1DC691"
		minDate="2023-1-1"
		:zIndex="999"
		:maxDate="moment().format('YYYY-MM-DD')"
		@onGetDate="onGetDate"
		@changeMoon="onChangeMoon">
	</dateTable>
</template>

<script setup lang="tsx" name="clockin">
import { onLoad,onShow } from "@dcloudio/uni-app";
import { ref,computed } from "vue";
import { getClockinCount,getGroupMember,getGroupFoodDate } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import moment from "moment";
import "moment/dist/locale/zh-cn";
import dateTable from "@/components/dateTable.vue";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import {
    handleJumpToChat,
} from "@/hooks/imHooks";

const systemInfo: any = systemInfoStore();

const contentBottom = computed(()=>{
    if(formRecord.value){
        return systemInfo.safeAreaInsets?.bottom+uni.upx2px(200);
    }
    return systemInfo.safeAreaInsets?.bottom+uni.upx2px(120);
})
const userData: any = userDataStore();
const groupId = ref();
const goBack = () => {
	uni.navigateBack();
};
const formRecord = ref(false);
onLoad((options:any)=>{
    if(options.from==='record'){
        formRecord.value = true;
    }
	groupId.value = options.groupId;  
});
onShow(() => {
    tapLoading = false;
	refreshData();
});
const pageData:any = ref();
const isClockin = ref(false);//食物是否打卡按钮
const isClockin2 = ref(false);//体重是否打卡按钮
const isClockin3 = ref(false);//运动是否打卡按钮

const isAdmin = ref(false);//用户是否为管理员或群主
const refreshData = () => {
	getGroupMember({ groupId: groupId.value,userId:userData.id }).then((res:any)=>{
		//console.log(res);
		if(res.success){
			let groupUserInfo = res.data.list[0];
			//console.log(groupUserInfo)
			
			if(groupUserInfo.isJoinClock==1){
				isClockin.value = true;
			}else{
				isClockin.value = false;
			}
			if(groupUserInfo.isJoinClock2==1){
				isClockin2.value = true;
			}else{
				isClockin2.value = false;
			}
			if(groupUserInfo.isJoinClock3==1){
				isClockin3.value = true;
			}else{
				isClockin3.value = false;
			}
			if(groupUserInfo.role=="Admin"||groupUserInfo.role=="Owner"){
				isAdmin.value = true;
			}else{
				isAdmin.value = false;
			}
			//console.log(isClockin.value,isClockin2.value,isClockin3.value)
		}
	});

	//isAdmin.value = false;
	let params = {
		userId:userData.id,
		recordDate:moment(selectDate.value).format("YYYY-MM-DD"),
		groupId:groupId.value
	}
	getClockinCount(params).then((res:any) => {
		if(res.success){
			pageData.value = res.data;
			console.log(pageData.value)
		}
	});
}

const goClockinMember = (joinClockType:number) => {
	uni.navigateTo({
		url:`/pages/clockinMember/clockinMember?groupId=${groupId.value}&joinClockType=${joinClockType}`,
	});
}

const goClockinState = (type:number) => {
	uni.navigateTo({
		url:`/pages/clockinState/clockinState?groupId=${groupId.value}&type=${type}&recordDate=${moment(selectDate.value).format("YYYY-MM-DD")}`
	});
}
//跳转打卡记录


const goClockinRecord = () => {
	uni.navigateTo({
		url:`/pages/clockinRecord/clockinRecord?groupId=${groupId.value}&userId=${userData.id}`
	});
}
//提示加入打卡
const addClockin = () => {
	uni.showToast({
		icon: "none",
		title:'请联系群主或管理员',
		duration: 1500,
	});
}
//日期选择
const isTip = ref(false);
const selectDate:any = ref(new Date());//选中的日期
const markDate:any = ref([])//需要标识的日期
const datePopup = ref();
const onGetDate = (date:Date) => {
	selectDate.value = date;
	if(moment(selectDate.value).format("YYYY-MM-DD")==moment().format("YYYY-MM-DD")){
		isTip.value = false
	}else{
		isTip.value = true
	}
	refreshData();//重新加载数据
	//isAddDisable();//设置按钮是否可用
}
//日期选择
const showDateTable = () => {
	onChangeMoon(selectDate.value);//查询需要高亮显示的日期
	datePopup.value.open();
	
}
//日期选择器月份变更时操作
const onChangeMoon = (date:any) => {
	markDate.value = [];
	let param = {
		userId:userData.id,
		groupId:groupId.value,
		//type:5,
		recordDate:moment(date).format("YYYY-MM-DD"),
	}
	getGroupFoodDate(param).then((res:any) => {
		res.data.forEach((item:any) => {
			markDate.value.push(item.recordDate)
		})
	})
}
//切换到今天
const goToday = () => {
	selectDate.value = moment();
	isTip.value = false;
	refreshData();//重新加载数据
}

let tapLoading = false;

const goQuanzi = async () => {
    if(tapLoading){
        return;
    }

    tapLoading = true;

    await handleJumpToChat(`GROUP${groupId.value}`, true);
};

</script>

<style lang="scss" scoped>
@import './clockin.scss';
.content1{
    position:fixed;
    width:750rpx;
    left:0;
    padding-top:20rpx;
    
}
</style>
